<template>
  <div>
    <el-card>
      <!-- 搜索及按钮功能区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入消息的类型(通知/公告)" v-model="searchStr" class="input-with-select" clearable @clear="handleClear">
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
          </el-input>
        </el-col>
        <el-col :span="16">
          <el-button type="primary" plain @click="dialogAddVisible = true">新建公告/通知</el-button>
        </el-col>
      </el-row>
      <!-- 主体表格区 -->
      <el-table :data="messageData" style="width: 100%">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="newsTitle" label="标题" align="center" width="150"></el-table-column>
        <el-table-column prop="newsType" label="类型" width="80" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.newsType == 0">通知</el-tag>
            <el-tag type="warning" v-else>公告</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="newsContent" show-overflow-tooltip label="内容" align="center"></el-table-column>
        <el-table-column prop="newsSendTime" label="发起日期" align="center"></el-table-column>
        <el-table-column prop="newsSendTime_1" label="发起时间" align="center"></el-table-column>
        <el-table-column prop="newsSender" label="发起人" align="center"></el-table-column>
        <el-table-column prop="newsAddr" label="地点" align="center" width="120">
          <template slot-scope="scope">
            <el-tag type="info" v-if="scope.row.newsAddr == ''">暂无</el-tag>
            <div>{{ scope.row.newsAddr }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <div>
              <el-button type="primary" plain size="mini" @click="handleDetail(scope.row)">详情</el-button>
              <el-button type="danger" plain size="mini" @click="handleDelete(scope.row.newsId)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页区域 -->
    <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum" :page-sizes="[5, 10, 20, 40]" :page-size="queryInfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination> -->
    <!-- 添加公告对话框 -->
    <el-dialog title="新建公告/通知" :visible.sync="dialogAddVisible" width="50%" @close="resetForms()">
      <el-form :model="addInfoItem" label-width="70px" :rules="addFormRules" ref="addFormDataRef">
        <el-form-item label="标题" prop="newsTitle">
          <el-input v-model="addInfoItem.newsTitle"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="newsType">
          <el-select v-model="addInfoItem.newsType" placeholder="请选择新建类型">
            <el-option label="通知" :value="0"></el-option>
            <el-option label="公告" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发布人" prop="newsSender">
          <el-input v-model="addInfoItem.newsSender" placeholder="请填写此次发布人的姓名"></el-input>
        </el-form-item>
        <el-form-item label="发布时间">
          <el-col :span="11">
            <el-form-item prop="newsSendTime">
              <el-date-picker type="date" placeholder="选择日期" v-model="addInfoItem.newsSendTime"  value-format="yyyy-MM-dd" style="width: 100%;">
            </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">--</el-col>
          <el-col :span="11">
            <el-form-item prop="newsSendTime_1">
              <el-time-picker placeholder="选择时间" v-model="addInfoItem.newsSendTime_1" value-format="hh:mm:ss" style="width: 100%;">
            </el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="地点" prop="newsAddr">
          <el-input v-model="addInfoItem.newsAddr" placeholder="若无可以直接忽略改输入框"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input type="textarea" v-model="addInfoItem.newsContent"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFromSubmitEvent()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 查看详情对话框 -->
    <el-dialog title="详情信息" :visible.sync="dialogDetailVisible" width="50%">
      <el-form :model="detailData" label-width="100px">
        <el-form-item label="标题 :" class="text">
          <!-- <el-input v-model=""></el-input> -->
          {{ detailData.newsTitle }}
        </el-form-item>
        <div class="box">
          <el-form-item label="类型 :">
            <el-tag type="success" v-if="detailData.newsTitle == 0">通知</el-tag>
            <el-tag type="warning" v-else>公告</el-tag>
          </el-form-item>
          <el-form-item label="发布时间:">
            <el-tag>{{ detailData.newsSendTime }}</el-tag>
          </el-form-item>
          <el-form-item label="地点:" class="addr">
            <div v-if="detailData.newsAddr == ''">
              <el-tag type="info"> 暂无</el-tag>
             </div>
            <div v-else> {{ detailData.newsAddr }} </div>
          </el-form-item>
          <el-form-item label="发起人:" class="lead">
            {{detailData.newsSender}}
          </el-form-item>
        </div>
        <el-form-item label="内容 :" disabled>
          <div class="contentbox">{{ detailData.newsContent }}</div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmBtn" :disabled="enableBtn">确认/收到</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import axios from 'axios'
export default {
  data () {
    return {
      enableBtn: false,
      // 搜索框信息
      searchStr: '',
      // 消息总数据
      messageData: [],
      // 分页查询的信息
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },
      /* 总数据条数 */
      total: 12,
      // 增加公告的对话框显示与隐藏
      dialogAddVisible: false,
      // 添加 公告/通知的 数据
      addInfoItem: {
        newsTitle: '',
        newsType: '',
        newsContent: '',
        newsSendTime: '',
        newsSendTime_1: '',
        newsSender: '',
        newsAddr: ''
      },
      // // 将后端传过来的时间字符串分成两个部分
      // news_date: {
      //   news_data: '',
      //   news_time: ''
      // },
      // 查看详情的对话框显示与隐藏
      dialogDetailVisible: false,
      detailData: {},
      // 添加表单的验证规则
      addFormRules: {
        newsTitle: [
          { required: true, message: '请输入title', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        newsType: [
          { required: true, message: '请选择类型', trigger: 'change' }
        ],
        newsSender: [
          { required: true, message: '请填写此次发布人的姓名', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    this.getMessageList()
    // this.testFindDepartment()
  },
  methods: {
    // 点击 查看消息对话框按钮之后 确认按钮禁用
    confirmBtn () {
      this.dialogDetailVisible = false
      this.enableBtn = true
    },
    // 清除搜索事件
    handleClear () {
      this.getMessageList()
    },
    // 搜索事件 可以根据状态、名称进行搜索
    handleSearch () {
      this.searchStr = this.searchStr.trim()
      let status = null
      if (this.searchStr === '通知') {
        status = 0
      } else {
        // eslint-disable-next-line no-unused-vars
        status = 1
      }
      this.$http.get('/v1/oa/news/getByType', {
        params: {
          typeid: status
        }
      }).then(res => {
        this.messageData = res.data.data
        this.messageData.forEach(item => {
          item.newsSendTime_1 = item.newsSendTime.split(' ')[1]
          item.newsSendTime = item.newsSendTime.split(' ')[0]
        })
      })
    },
    // 监听 pagesize 改变的事件
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getMessageList()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getMessageList()
    },
    // 分页获取数据
    getPageInfo () {
      // get('/v1/oa/task/pagedQuery')
    },
    // 获取消息列表的数据
    getMessageList () {
      this.$http.get('/v1/oa/news/findAll').then(res => {
        // console.log(res)
        this.messageData = res.data.data
        this.messageData.forEach(item => {
          item.newsSendTime_1 = item.newsSendTime.split(' ')[1]
          item.newsSendTime = item.newsSendTime.split(' ')[0]
        })
      })
    },
    // 查看详情对话框的事件
    handleDetail (row) {
      this.dialogDetailVisible = true
      row.news_sendTime = row.news_sendTime + ' ' + row.news_sendTime_1
      this.detailData = row
      console.log(this.detailData)
    },
    /* 删除信息事件 */
    handleDelete (id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.delete(`/v1/oa/news/delete/${id}`).then(res => {
          // console.log(res)
          this.getMessageList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 添加表单重置事件
    resetForms () {
      this.$refs.addFormDataRef.resetFields() // form是绑定数据,一定记得加prop参数，不加的话无法重置弹框表单数据
    },
    // 添加表单的提交事件 http://localhost:8888/v1/oa/news/add
    addFromSubmitEvent () {
      // console.log(this.addInfoItem)
      // 将 添加的日期和具体的时间放到一个 字段中 便于传参
      this.addInfoItem.newsSendTime = this.addInfoItem.newsSendTime + ' ' + this.addInfoItem.newsSendTime_1
      console.log(this.addInfoItem.newsType)
      this.$refs.addFormDataRef.validate(async valid => {
        if (!valid) return false
        this.$http.post('/v1/oa/news/add', {
          newsTitle: this.addInfoItem.newsTitle,
          newsType: this.addInfoItem.newsType,
          newsSender: this.addInfoItem.newsSender,
          newsContent: this.addInfoItem.newsContent,
          newsSendTime: this.addInfoItem.newsSendTime,
          newsAddr: this.addInfoItem.newsAddr
        }).then(res => {
          // console.log(res.data)
          if (res.data.code !== 200) return this.$message.error('添加信息失败')
          this.$message.success('添加信息成功')
          this.getMessageList()
          this.addInfoItem.newsContent = ''
          this.dialogAddVisible = false
        }) /*   */
      })
    },
    testFindDepartment () {
      // axios.get('/v1/oa/department/changedep/findAll').then(res => {
      //   console.log(res)
      // })
    }
  }
}
</script>
<style lang="less" scoped>
.el-table .warning-row {
  background: oldlace;
}
.el-col-2 {
  text-align: center;
}
.el-table .success-row {
  background: #f0f9eb;
}
.text {
  color: cornflowerblue;
  font-weight: bolder;
}
.box {
  display: flex;
  .lead{
    color: lightseagreen;
  }
  .addr{
    color:#d83b02;
  }
}
.contentbox{
  width: 80%;
  height: 300px;
  border: 2px dashed #55d254;
  padding: 10px 20px;
  color: #d83b02;
  overflow: auto;
}
</style>
